﻿<link href="~/Assets/css/bootstrap-fileupload.css" rel="stylesheet" />
<script src="~/Assets/javascripts/bootstrap-fileupload.js"></script>
<div class="box" id="imageUploadBox">
    <div class="title">
        <h4>
            <span>Upload Images</span>
        </h4>
    </div>

    <div class="content">
        <div class="fileupload fileupload-new" data-provides="fileupload">
            <div class="fileupload-new thumbnail">
                <img src="~/Assets/images/thumb.png" />
            </div>
            <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
            <div>
                <span class="btn btn-file">
                    <span class="fileupload-new">Select image</span>
                    <span class="fileupload-exists">Change</span>
                    <input id="fileInput" type="file" />
                </span>
                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript">
    function uploadImageAndSubmitForm(submitFormFunction, onUploadError) {
        var fileInput = document.getElementById('fileInput');
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '@Url.Action("Upload", "Upload")', true);
        //xhr.callback = callBack;
        xhr.setRequestHeader('Content-type', 'multipart/form-data');
        //Appending file information in Http headers
        xhr.setRequestHeader('X-File-Name', fileInput.files[0].name);
        xhr.setRequestHeader('X-File-Type', fileInput.files[0].type);
        xhr.setRequestHeader('X-File-Size', fileInput.files[0].size);
        //Sending file in XMLHttpRequest
        xhr.send(fileInput.files[0]);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                submitFormFunction(JSON.parse(xhr.responseText));
                return true;
            } else {
                
            }
        };
        return false;
    }

</script>
